<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-12-16 11:20:05
 * @LastEditTime : 2023-03-03 14:48:09
-->
<script lang="ts" setup name="IkTooltip">
import useSettingsStore from '@g/store/modules/settings'
import type { PropType } from 'vue'

const props = defineProps({
  effect: {
    type: String as PropType<'dark' | 'light'>,
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  placement: {
    type: String as PropType<
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'left'
    | 'left-start'
    | 'left-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    >,
    default: 'bottom-start'
  }
})

const settingsStore = useSettingsStore()

const _effect = computed(() => props.effect || settingsStore.settings.app.colorScheme)
</script>

<template>
  <el-tooltip
    class="gl-tooltip"
    :effect="_effect"
    :content="content"
    :placement="placement"
    :enterable="false"
  >
    <slot></slot>
  </el-tooltip>
</template>
